<template>
    
    <!-- 组件的模板 -->
    <div class="page salary-view">
        <div class="mod-user">
            <a class="flex mod-access bg-color touch" href="javascript:;" @click="gotoKaoqinPersonal(show_data.user_id)">
                <img class="avatar" v-if="show_data.logo.thumb_url" :src="show_data.logo.thumb_url" alt="">
                <img class="avatar" v-else src="../../static/imgs/avatar.png" alt="">
                <div class="c1">
                    <span class="name">{{show_data.user_name}}</span>
                    <span class="team">{{show_data.group_name}}</span>
                </div>
                <div class="c2">
                    <span class="title">出勤情况:</span>
                    <p class="day" v-if="base_wage_unit == 0"><span class="s1">{{show_data.normal_days}}天正常</span><span class="s2">{{show_data.abnormal_days}}天异常</span></p>
                    <p class="day" v-else><span class="s1">{{show_data.total_time}}个小时</span></p>
                </div>
            </a>
        </div>
        <div class="weui-cells__title">工资明细</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title">基本工资</label></div>
                <div class="weui-cell__bd">
                    <span class="money">{{show_data.base_wage/100}}</span>
                </div>
            </div>
            <template v-for="item in show_data.extra_pay">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label title">{{item.name}}</label></div>
                    <div class="weui-cell__bd">
                        <span class="money">{{item.value/100}}</span>
                    </div>
                </div>
            </template>
            <p class="total com-border-top com-border-bottom">合计：<em>{{show_data.total_wage/100}}</em></p>
        </div>
        <div class="weui-cells__title" v-if="show_data.remark">备注信息</div>
        <div class="weui-cells weui-cells_form" v-if="show_data.remark" style="margin-bottom: 12px;">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="note">{{show_data.remark}}</div>
                </div>
            </div>
        </div>
        <div class="page-nav bg-color" :style="isIphoneX?'padding-bottom:25px;':''">
            <a class="btn_pre" href="javascript:;" :class="{'hidePage': per_index == 0}" @click="chageIndex(0)">上一条</a>
            <a class="btn_nxt" href="javascript:;" :class="{'hidePage': per_index >= perDetails.length-1}" @click="chageIndex(1)">下一条</a>
            <span class="page">{{per_index/1+1}}/{{perDetails.length}}</span>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import cache from 'gapi/cache.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                team_id: 0,
                project_id: 0,
                date: '',
                perDetails: [],//所有人的信息
                per_index: 0,
                show_data: {},//当前展示的对应的信息
                base_wage_unit: 0, //0:元/天 1:元/小时
            }
        },
        computed: {
            isIphoneX: function(){
                return util.isIphoneX()
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                this.per_index = util.getUrddataString('per_index')
                this.base_wage_unit = util.getUrddataString('base_wage_unit')
                this.date = util.getLocalTime(util.getUrddataString('end_date')*1000, 'yyyy-MM-dd')
                cache.getCache('perDetails', (data) => {
                    // console.log(data)
                    this.perDetails = data
                    console.log(this.per_index)
                    this.show_data = data[this.per_index]
                    console.log(this.show_data)
                })
                cache.getCache('KqCacheMessge', (data) => {
                    console.log(data)
                    this.team_id = data.team_id
                    this.project_id = data.project_id
                })
                
                
            },
            chageIndex(label){
                if(label == 0 && this.per_index > 0){
                    console.log('上一页')
                    this.per_index --
                    this.show_data = this.perDetails[this.per_index]
                }
                if(label == 1 && this.per_index < this.perDetails.length-1){
                    console.log('下一页')
                    this.per_index ++
                    this.show_data = this.perDetails[this.per_index]
                }
            },
            gotoKaoqinPersonal(id){
                let str = encodeURIComponent(`date=${this.date}&user_id=${id}&team_id=${this.team_id}&project_id=${this.project_id}&origin=listbystatus`)
                window.location.href="dmsaas://KaoqinPersonal?urdData="+str
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/salary.css"></style>
<style type="text/css">
    .hidePage{
        visibility: hidden;
    }
</style>

